import React, {useEffect, useState} from 'react';
import {useLocation, useNavigate} from "react-router-dom";

import './index.css';
import {Input, message, Pagination, Spin} from "antd";
import http from "../../../util/http";
import defaultImg from './image/default.png'

const {Search} = Input;

function ImgTable(props) {
    let navigate = useNavigate();
    const location = useLocation();
    const state = location.state || {}
    const params = state.params || {}
    const dirId = params.dirId || -1;
    const [data, setData] = useState([]);
    const [total, setTotal] = useState(0)
    const [search, setSearch] = useState("")
    const [loading, setLoading] = useState(false);
    const [page, setPage] = useState({
        total: 0,
        pageNum: 1,
        pageSize: 10
    });
    useEffect(() => {
        if (dirId !== -1) {
            setLoading(true)
            http.doPost('/doc/getdoc', {
                category: dirId,
                pageSize: page.pageSize,
                pageNum: page.pageNum,
                search: search
            }).then(res => {
                if (res.status === 200) {
                    setData(res.data.list)
                    setTotal(res.data.totalCount)
                }
                setLoading(false)
            }).catch(reason => {
                message.error(reason.message)
                setLoading(false)
            })
        }
    }, [page, dirId, search])

    function openUrl(docId) {
        if (docId && docId !== "") {
            navigate('/portal/details?hiddenLeft=1', {
                state: {docId, page: state.page, text: state.text, params: params}
            });
        }
    }

    const onChange = (current, pageSize) => {
        setPage({
            pageNum: current,
            pageSize: pageSize
        })
    };

    const onSearch = (value) => {
        if (!loading) {
            setSearch(value)
        }
    }
    // 总院动态，水利要闻 党建动态，群团建设，不显示图片
    const ignoreImageList = [
        'dynamic',
        'news',
        'party',
        'build',
        ]

    function getLastParam(){
        const url = window.location.href
        // 获取hash部分（#之后的内容）
        const hash = new URL(url).hash;
        // 移除开头的#，然后按/分割
        const parts = hash.substring(1).split('/');
        // 返回最后一个非空部分
        return parts.filter(part => part).pop();
    }

    const checkIgnore = () => {
        return !ignoreImageList.includes(getLastParam())
    }
    return (
        <div className="portal-imgTable-main">
            <Search
                placeholder="请输入查询内容"
                allowClear
                enterButton="查询"
                size="large"
                onSearch={onSearch}
                disabled={loading}
                style={{width: 304, float: 'right', marginBottom: 20}}
            />
            <div style={{clear: "both"}}/>
            <Spin spinning={loading}>
                <div className="portal-imgTable-table">
                    {
                        data && data.map((item, index) => {
                            item.imgUrl = item.imgUrl || defaultImg
                            if (item.imgUrl && item.imgUrl !== "") {
                                return (
                                    <div className="portal-imgTable-table-one-both" key={index}
                                         onClick={() => openUrl(item.id)}>
                                        {
                                            checkIgnore() &&
                                                (
                                                        <div className="portal-imgTable-table-one-img">
                                                            <img src={item.imgUrl} alt=""/>
                                                        </div>
                                                )

                                        }

                                        <div className="portal-imgTable-table-one-text">
                                            <div className="portal-imgTable-table-one-title">{item.docSubject}</div>
                                            <div className="portal-imgTable-table-one-content">{item.docContent}</div>
                                            <div className="portal-imgTable-table-one-time">{item.docCreateDate}</div>
                                        </div>
                                    </div>
                                )
                            } else {
                                return (
                                    <div className="portal-imgTable-table-one" key={index} onClick={() => openUrl(item.id)}>
                                        <div className="portal-imgTable-table-one-title">{item.docSubject}</div>
                                        <div className="portal-imgTable-table-one-content">{item.docContent}</div>
                                        <div className="portal-imgTable-table-one-time">{item.docCreateDate}</div>
                                    </div>
                                )
                            }
                        })
                    }
                </div>
                <div className="portal-imgTable-pagination">
                    <Pagination
                        showSizeChanger
                        showQuickJumper
                        showTotal={(total) => `共${total}条`}
                        current={page.pageNum}
                        pageSize={page.pageSize}
                        total={total}
                        hideOnSinglePage={false}
                        onChange={onChange}
                    />
                </div>
            </Spin>
        </div>
    );
}

export default ImgTable;